<template>
	<view>
		<view :class="['shopping-cart-list', data._navbar?'shopping-cart-list2':'']" v-if="data.shoppingCartModel">
			<view class="carHeader">
				<view class="yixuan">已选商品</view>
				<view @tap="$emit('clearShoppingCart',$event)" class="clearAll">
					<image :src="data.data.__wxapp_img.dapp.clear.url" style="width:22upx; height:22upx;margin-right:10upx; "></image>
					<text style="font-size:27upx;color:#BDBDBD;">清空</text>
				</view>
			</view>
			<view class="hr"></view>
			<scroll-view scrollY="true" style="max-height: 500upx;width:100%">
				<block v-for="(cargood,index) in data.carGoods" :key="cargood.id">
					<block v-if="cargood.attr==''">
						<view class="carGood" v-if="cargood.num>0">
							<view class="goodsname" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{cargood.goods_name}}</view>
							<view class="goodsNumPrice">
								<view class="goodsTotalPrice" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">￥{{cargood.goods_price}}</view>
								<view class="goodsNum">
									<view @tap="$emit('jia',$event)" class="carStandard" :data-id="cargood.goods_id" :data-index="index">
										<image class="carStandard" :src="data.__wxapp_img.dapp.jia.url"></image>
									</view>
									<view class="carStandard" id="carStandard_num">{{cargood.num}}</view>
									<view @tap="$emit('jian',$event)" class="carStandard" :data-id="cargood.goods_id" :data-index="index">
										<image class="carStandard" :src="data.__wxapp_img.dapp.jian.url"></image>
									</view>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="carGood" v-if="cargood.num>0">
							<view class="goods_attr_name">
								<view class="cargood_name" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{cargood.goods_name}}</view>
								<view class="cargood_attr_name" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;float:left;">
									<text v-for="(item,i) in cargood.attr" :key="item.id">{{item.attr_group_name}}:{{item.attr_name}}</text>
								</view>
							</view>
							<view class="goodsNumPrice">
								<view class="goodsTotalPrice">￥{{cargood.goods_price}}</view>
								<view class="goodsNum">
									<view @tap="$emit('jia',$event)" class="carStandard" :data-id="cargood.goods_id" :data-index="i">
										<image class="carStandard" :src="data.__wxapp_img.dapp.jia.url"></image>
									</view>
									<view class="carStandard" id="carStandard_num">{{cargood.num}}</view>
									<view @tap="$emit('jian',$event)" class="carStandard" :data-id="cargood.goods_id" :data-index="i">
										<image class="carStandard" :src="data.__wxapp_img.dapp.jian.url"></image>
									</view>
								</view>
							</view>
						</view>
					</block>
				</block>
			</scroll-view>
		</view>
		<view @tap="$emit('hideShoppingCart',$event)" class="modal-mask" v-if="data.shoppingCartModel"></view>
		<view :class="['goods_car', data._navbar?'shopping_cart':'', data.__device]">
			<block v-if="data.total.total_num==0">
				<view class="buy">
					<view class="car_pic">
						<image class="car_png" :src="data.__wxapp_img.dapp.car.url"></image>
					</view>
					<view class="weixuan">未选购商品</view>
				</view>
				<view class="goumai">立即购买</view>
			</block>
			<block v-if="data.total.total_num>0">
				<view @tap="$emit('shoppingCartListModel',$event)" class="buy">
					<view class="car_pic">
						<image class="car_png" :src="data.__wxapp_img.dapp.yougoods.url"></image>
						<view class="total_num">{{data.total.total_num}}</view>
					</view>
					<view class="price">￥{{data.total.total_price}}</view>
				</view>
				<view @tap="$emit('buynow',$event)" class="pay">立即购买</view>
			</block>
		</view>
	</view>
</template>
<script>var myVue = {};
	export default {
		props:['data']
	}
</script>
<style scoped>
.goods_car {
    position: fixed;
    bottom: var(--window-bottom);
    width: 100%;
    height: 10%;
    background: #565656;
    opacity: 0.9;
    z-index: 8888;
}

.shopping_cart {
    bottom: 115upx;
}

.buy {
    height: 100%;
    width: 66%;
    float: left;
    margin-left: 4%;
}

.car_pic {
    position: relative;
    bottom: 15%;
    width: 110upx;
    height: 110upx;
    border-radius: 100%;
    float: left;
}

.car_png {
    width: 100%;
    height: 100%;
}

.weixuan {
    font-size: 15px;
    font-weight: bold;
    color: #b5b5b5;
    height: 100%;
    width: 40%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goumai {
    height: 100%;
    width: 30%;
    float: right;
    font-size: 33upx;
    font-weight: bold;
    color: #959595;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #686868;
}

.total_num {
    font-size: 20upx;
    color: #f1d1dd;
    background: #ef503c;
    width: 39%;
    height: 25%;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 45%;
    bottom: 100%;
}

.price {
    font-size: 17px;
    color: #fff;
    margin-left: 25upx;
    height: 100%;
    width: 40%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay {
    height: 100%;
    width: 30%;
    float: right;
    font-size: 33upx;
    font-weight: bold;
    color: #f1d1dd;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fa5c51;
}

.carHeader {
    width: 100%;
    height: 30upx;
    margin: 20upx 0upx;
}

.shopping-cart-list {
    position: fixed;
    bottom: calc(10% + var(--window-bottom));
    width: 100%;
    background: #f9f9f9;
    z-index: 3333;
}

.shopping-cart-list2 {
    bottom: 20%;
}

.yixuan {
    float: left;
    width: 180upx;
    height: 100%;
    color: #a7a7a7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 25upx;
    font-size: 31upx;
    border-left: 6upx solid #f76766;
}

.clearAll {
    float: right;
    height: 100%;
    margin-right: 5%;
}

.hr {
    border-bottom: 1upx solid #e6e6e6;
}

.carGood {
    width: 100%;
    height: 100upx;
    border-bottom: 1upx solid #e6e6e6;
}

.goodsname {
    width: 47%;
    height: 100%;
    float: left;
    line-height: 100upx;
    margin-left: 25upx;
    font-size: 30upx;
    color: #585858;
}

.goodsNumPrice {
    width: 47%;
    height: 100%;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goodsTotalPrice {
    float: left;
    width: 50%;
    color: #ff4544;
    font-size: 30upx;
    line-height: 100upx;
}

.goodsNum {
    float: right;
    width: 48%;
    margin-right: 2%;
    line-height: 100upx;
}

.carStandard {
    border-radius: 100%;
    width: 44upx;
    height: 44upx;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

#carStandard_num {
    width: 65upx;
}

.goods_attr_name {
    width: 49%;
    height: 100%;
    float: left;
    margin-left: 25upx;
}

.cargood_name {
    width: 100%;
    height: 50%;
    font-size: 30upx;
    color: #585858;
}

.cargood_attr_name {
    width: 100%;
    height: 50%;
    font-size: 25upx;
    color: #585858;
}

.device_iphone_x {
    bottom: 65upx;
}

.shopping_cart.device_iphone_x {
    bottom: 247upx;
}
</style>